<extend name="Base/common"/>


<block name="body">
    <section>
        <div class="col-xs-10 col-xs-offset-1 register" style="margin-top: 60px;margin-bottom: 120px;">
            <div class="col-xs-12"><h1 style="font-size: 18px;color: #333333;">欢迎注册{:C('WEB_SITE')}账号</h1></div>
            <div class="col-xs-12 rg_go">
                <div class="col-sm-4 col-xs-6" style="position: relative;padding: 0;margin-bottom: 20px;">
                    <img src="__IMG__/start_image.png" class="img-responsive" alt="" style="height: 40px;">

                    <div style="margin-top: -35px;color: white;line-height: 30px;font-size: 16px;margin-left: 21px;">
                        填写用户信息
                    </div>
                </div>
                <php>
                    $src_upload=$src_finish="__IMG__/todo_image.png";
                    if($type=="upload"){
                    $src_upload="__IMG__/finish_image.png";
                    }elseif($type=="finish"){
                    $src_upload=$src_finish="__IMG__/finish_image.png";
                    }
                </php>
                <div class="col-sm-4 col-xs-6" style="position: relative;padding: 0;">
                    <img src="{$src_upload}" class="img-responsive" alt="" style="height: 40px;">

                    <div style="margin-top: -35px;color: white;line-height: 30px;font-size: 16px;margin-left: 21px;">
                        上传头像（可跳过）
                    </div>
                </div>
                <div class="col-sm-4 col-xs-6 col-sm-offset-0 col-xs-offset-6" style="position: relative;padding: 0;">
                    <img src="{$src_finish}" class="img-responsive" alt="" style="height: 40px;">

                    <div style="margin-top: -35px;color: white;line-height: 30px;font-size: 16px;margin-left: 21px;">
                        注册完成
                    </div>
                </div>
            </div>
            <style>
                input{
                    display: inline-block;
                }
            </style>
            <if condition="$type eq 'start'">
                <div class="col-xs-12 col-md-6">
                    <form class="" action="__SELF__" method="post">
                        <div class="form-group">
                            <label for="username" class=".sr-only col-xs-12" style="display: none"></label>
                            <input type="text" id="username" onblur="setNickname(this);" class="form-control" placeholder="请输入用户名"
                                   ajaxurl="/member/checkUserNameUnique.html" errormsg="请填写1-16位用户名"
                                   nullmsg="请填写用户名"
                                   datatype="*1-16" value="" name="username">
                            <span class="help-block">输入用户名，只允许字母和数字和下划线</span>
                            <div class="clearfix"></div>
                        </div>
                        <div class="form-group">
                            <label for="nickname" class=".sr-only col-xs-12" style="display: none"></label>
                            <input type="text" id="nickname" class="form-control" placeholder="请输入昵称"
                                   ajaxurl="/member/checkNickNameUnique.html" errormsg="请填写1-16位昵称"
                                   nullmsg="请填写昵称"
                                   datatype="*1-16" value="" name="nickname">

                            <span class="help-block">输入昵称，只允许中文、字母和数字和下划线</span>
                            <div class="clearfix"></div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail" class=".sr-only col-xs-12" style="display: none"></label>
                            <input type="text" id="inputEmail" class="form-control" placeholder="请输入电子邮件"
                                   ajaxurl="/member/checkUserEmailUnique.html" errormsg="请填写正确格式的邮箱" nullmsg="请填写邮箱"
                                   datatype="e" value="" name="email">
                            <span class="help-block">输入密码</span>
                            <div class="clearfix"></div>
                        </div>
                        <div class="form-group">
                            <div id="password_block" class="input-group">
                                <input type="password" id="inputPassword" class="form-control" placeholder="请输入密码"
                                       errormsg="密码为6-20位" nullmsg="请填写密码" datatype="*6-20" name="password">

                                <div class="input-group-addon"><a style="width: 100%;height: 100%"
                                                                  href="javascript:void(0);"
                                                                  onclick="change_show(this)">show</a></div>
                            </div>
                            <span class="help-block">再次输入密码</span>
                            <div class="clearfix"></div>
                        </div>
                        <if condition="C(VERIFY_OPEN) eq 1 OR C(VERIFY_OPEN) eq 2">
                            <div class="form-group">
                                <label for="verifyCode" class=".sr-only col-xs-12" style="display: none"></label>

                                <div class="col-xs-4" style="padding: 0px;">
                                    <input type="text" id="verifyCode" class="form-control" placeholder="验证码"
                                           errormsg="请填写5位验证码" nullmsg="请填写验证码" datatype="*5-5" name="verify">
                                    <span class="help-block">输入密码</span>
                                </div>
                                <div class="col-xs-8 lg_lf_fm_verify">
                                    <img class="verifyimg reloadverify img-responsive" alt="点击切换" src="{:U('verify')}"
                                         style="cursor:pointer;">
                                </div>
                                <div class="col-xs-12 Validform_checktip text-warning lg_lf_fm_tip"></div>
                                <div class="clearfix"></div>
                            </div>
                        </if>
                        <div style="float: left;vertical-align: bottom;margin-top: 12px;color: #848484;">
                            已有账户， <a href="{:U('Home/User/login')}" title="" style="color: #03B38B;">登录</a>
                        </div>
                        <button type="submit" class="btn btn-primary pull-right">提 交</button>
                    </form>
                </div>
            </if>
            <if condition="$type eq 'upload'">
                <include file="User/changeavatar"/>
            </if>
            <if condition="$type eq 'finish'">
                <div class="col-xs-12" style="font-size: 16px;margin-top: 30px;">
                    <span>感谢您注册 ThinkOX ，希望你玩的愉快！ <a href="{:U('Usercenter/Config/index')}" title="">完善个人资料</a> 或 <a href="{:U('Weibo/Index/index')}" title="">前往首页</a></span>
                </div>
            </if>
        </div>
    </section>
</block>

<block name="side"></block>
<block name="script">
    <script type="text/javascript">
        if(MID==0){
            $(document)
                    .ajaxStart(function () {
                        $("button:submit").addClass("log-in").attr("disabled", true);
                    })
                    .ajaxStop(function () {
                        $("button:submit").removeClass("log-in").attr("disabled", false);
                    });
            $("form").submit(function () {
                var self = $(this);
                $.post(self.attr("action"), self.serialize(), success, "json");
                return false;

                function success(data) {
                    if (data.status) {
                        setTimeout(function () {
                            window.location.href = data.url
                        }, 10);
                    } else {
                        op_error(data.info, '温馨提示');
                        //self.find(".Validform_checktip").text(data.info);
                        //刷新验证码
                        $(".reloadverify").click();
                    }
                }
            });

            function change_show(obj) {
                if ($(obj).text().trim() == 'show') {
                    var value = $('#inputPassword').val().trim();
                    var html = '<input type="text" value="' + value + '" id="inputPassword" class="form-control" placeholder="请输入密码" errormsg="密码为6-20位" nullmsg="请填写密码" datatype="*6-20" name="password">' +
                            '<div class="input-group-addon"><a style="width: 100%;height: 100%" href="javascript:void(0);" onclick="change_show(this)">hide</a></div>';
                    $('#password_block').html(html);
                } else {
                    var value = $('#inputPassword').val().trim();
                    var html = '<input type="password" value="' + value + '" id="inputPassword" class="form-control" placeholder="请输入密码" errormsg="密码为6-20位" nullmsg="请填写密码" datatype="*6-20" name="password">' +
                            '<div class="input-group-addon"><a style="width: 100%;height: 100%" href="javascript:void(0);" onclick="change_show(this)">show</a></div>';
                    $('#password_block').html(html);
                }
            }

            function setNickname(obj){
                var text= jQuery.trim( $(obj).val());
                if(text!=null&&text!=''){
                    $('#nickname').val(text);
                }
            }

            $(function () {
                var verifyimg = $(".verifyimg").attr("src");
                $(".reloadverify").click(function () {
                    if (verifyimg.indexOf('?') > 0) {
                        $(".verifyimg").attr("src", verifyimg + '&random=' + Math.random());
                    } else {
                        $(".verifyimg").attr("src", verifyimg.replace(/\?.*$/, '') + '?' + Math.random());
                    }
                });
            });
        }
    </script>
</block>
